<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01发送AJAX请求</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="keyword" @keyup="getData($event)" @keydown.down="changeDown"
           @keydown.up.prevent="changeUp">
    <ul>
        <li v-for="(value,index) in myData" :class="{current:index==now}">
            {{value}}
        </li>
    </ul>
    <p v-show="myData.length==0">暂无数据....</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            keyword: '',
            myData: [],
            now: -1 //当前选中项的索引
        },
        methods: {
            getData(e) {
                //如果按方向键上、下，则不发请求
                if (e.keyCode == 38 || e.keyCode == 40)
                    return;

                this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
                    params: {
                        wd: this.keyword
                    },
                    jsonp: 'cb'
                }).then(resp => {
                    this.myData = resp.data.s;
                });
            },
            changeDown() {
                this.now++;
                this.keyword = this.myData[this.now];
                if (this.now == this.myData.length) {
                    this.now = -1;
                }
            },
            changeUp() {
                this.now--;
                this.keyword = this.myData[this.now];
                if (this.now == -2) {
                    this.now = this.myData.length - 1;
                }
            }
        }
    });
</script>
</body>
</html>